<template>
  <div class="bg-detaill">
    <div class="title">
      <span v-if="info.treatStatus == 1">已受理</span>
      <span v-if="info.treatStatus == 2">已取消</span>
      <span v-if="info.treatStatus == 3">停诊</span>
      <span v-if="info.treatStatus == 4">已完成</span>
      <span v-if="info.treatStatus == 5" style="color: red">违约</span>
    </div>
    <div class="xq-content">
      <div class="xq-con-top">
        <div class="list-form">
          <div class="item">
            <span class="label">就诊医院</span>
            <span class="text">{{ info.hospitalName }}</span>
          </div>
          <div class="item">
            <span class="label">就诊科室</span>
            <span class="text">{{ info.departmentName }}</span>
          </div>
          <div class="item">
            <span class="label">就诊医生</span>
            <span class="text">{{ info.doctorName }}</span>
          </div>
          <div class="item">
            <span class="label">就诊时间</span>
            <span class="text"
              >{{ info.treatDate }}{{ info.week }}{{ info.treatTime }}</span
            >
          </div>
          <div class="item">
            <span class="label">挂号费</span>
            <span class="text">{{ info.registerFee }}</span>
          </div>
          <div class="item">
            <span class="label">诊疗费</span>
            <span class="text">{{ info.treatFee }}</span>
          </div>
          <div class="item">
            <span class="label">就诊人</span>
            <span class="text">{{ info.name }}</span>
          </div>
        </div>
      </div>
      <div class="xq-con-center">
        <div class="list-infoList-form">
          <div class="item">
            <span class="label">取号时间</span>
            <span class="text">{{ info.qhtime }}</span>
          </div>
          <div class="item">
            <span class="label">取号方式</span>
            <span class="text">{{ info.qhmode }}</span>
          </div>
          <div class="item">
            <span class="label">就诊地点</span>
            <span
              class="text11"
              style="
                color: red;
                width: 90%;
                text-overflow: -o-ellipsis-lastline;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 3;
                line-clamp: 3;
                -webkit-box-orient: vertical;
                font-size: 0.4rem;
                font-family: PingFang SC;
                font-weight: 500;
                color: black;
                margin-bottom: 0.2rem;
                margin-top:0.1rem;
              "
              >{{ info.spot }}</span
            >
          </div>
        </div>
      </div>
      <div class="xq-con-bottom">
        <div class="top">
          <h5>注意事项</h5>
          <ul>
            <li>停诊将短信通知，请保持手机畅通</li>
            <li>实名制预约，就诊人的信息不符将无法取号</li>
            <li>就诊前一天{{ info.stopOrderTime }}截止预约</li>
            <li>就诊前一天{{ info.stopCancelTime }}截止取消预约</li>
          </ul>
        </div>
        <div class="btn">
          <div class="left" @click="gomine()">个人中心</div>
          <div
            class="right"
            @click="cancel()"
            v-if="hiorwr == 1 || hiorwr == 3"
          >
            取消预约
          </div>
        </div>
        <div class="dialog">
          <van-dialog
            v-model="show"
            message="取消成功"
            title="提示信息"
            @confirm="shore()"
            height="400px"
            show-cancel-button:false
            show-confirm-button:false
          >
            <div class="img">
              <img
                src="../../../../assets/img/main/shore.png"
                class="message-img"
              />
            </div>
            <div class="dialog-message">取消预约成功</div>
          </van-dialog>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { orderDetailsApi, cancelOrderApi } from "@/service/api.js";
import { Dialog, Toast } from "vant";
export default {
  name: "index",
  inject: ["reload"],

  data() {
    return {
      hiorwr: "",
      token: "",
      apptoken: "",
      orderid: "",
      show: false,
      info: []
    };
  },
  created() {
    // 拿取apptoken
    localStorage.getItem("apptoken"),
      (this.apptoken = JSON.parse(localStorage.getItem("apptoken"))),
      console.log(this.apptoken);
    // 拿取token
    this.token = localStorage.getItem("token");

    console.log(this.token);
    this.orderid = this.$route.query.orderid;
    // this.hiorwr = this.$route.query.hiorwr;

    console.log(this.hiorwr);
    // if (this.token) {
    //   console.log(this.token);
    this.getorderInfo();
    // } else {

    // }
    //获取订单详情
  },
  methods: {
    // 获取订单详情
    getorderInfo() {
      orderDetailsApi({
        token: this.token,
        apptoken: this.apptoken,
        // hospitalId: "402882687602384101760267eebc0092",
        orderId: this.orderid
      }).then(res => {
        if (res.code == 4000) {
          console.log(res);
          this.info = res.data;
          this.hiorwr = res.data.treatStatus;
        } else {
          if (res.code == 4002) {
            window.localStorage.removeItem("token");

            Dialog.confirm({
              title: "提示",
              message: "需前往登录页面完成登录"
            })
              .then(() => {
                this.$router.push({
                  name: "login"
                });
                // on confirm
              })
              .catch(() => {
                // on cancel
              });
          } else {
            Toast(res.msg);
          }
        }
      });
    },
    // 取消预约
    cancel() {
      Dialog.confirm({
        title: "提示信息",
        message: "您确定要取消当前预约么?"
      })
        .then(() => {
          cancelOrderApi({
            token: this.token,
            apptoken: this.apptoken,
            orderId: this.orderid
          }).then(res => {
            if (res.code == 4000) {
              console.log(res);
              if (res.code == 4000) {
                // this.show = true;
                Toast("取消成功");
                setTimeout(() => {
                  this.$router.go(-1);
                }, 1000);
              }
            } else if (res.code == 4002) {
              window.localStorage.removeItem("token");
              Dialog.confirm({
                title: "提示",
                message: "需前往登录页面完成登录"
              })
                .then(() => {
                  this.$router.push({
                    name: "login"
                  });
                  // on confirm
                })
                .catch(() => {
                  // on cancel
                });
            } else {
              Toast(res.msg);
            }
          });
        })
        .catch(() => {
          // on cancel
        });
    },
    // 个人中心
    gomine() {
      this.$router.push({
        name: "Mine"
      });
    },
    // 取消预约确定
    shore() {}
  }
};
</script>
<style lang="scss" scoped>
.dialog-message {
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #999999;
  text-align: center;
}
.message-img {
  width: 52px;
  height: 52px;
  margin: 0 auto;
  display: block;
}
.bg-detaill {
  // background: #f6f6f6;
  margin-top: 1rem;
}
.title {
  background: #07c6b4;
  height: 1.5rem;
  font-size: 0.45rem;
  font-family: PingFang SC;
  font-weight: 500;
  color: #ffffff;
  span {
    line-height: 1.5rem;
    margin-left: 0.2rem;
  }
}
.xq-con-top {
  // height: 126px;
  .list-form {
    padding: 0.2rem;
    .item {
      font-size: 0.4rem;
      font-family: PingFang SC;
      font-weight: 500;
      display: flex;
      margin-bottom: 0.4rem;
      .label {
        color: #999999;
        width: 2.5rem;
      }
      .text {
        color: #333;
      }
    }
  }
}
.xq-con-center {
  padding-bottom: 0.2rem;
  border-top: 1px solid #f1f1f1;
  .list-infoList-form {
    padding: 0.2rem;
    .item {
      font-size: 0.4rem;
      font-family: PingFang SC;
      font-weight: 500;
      display: flex;
      flex-direction: column;
      margin-bottom: 0.3rem;
      .label {
        color: #999999;
      }
      .text {
        padding-top: 10px;
        color: #333;
      }
    }
  }
}
// .xq-con-border {
//   height: 11px;
//   background: #f6f6f6;
// }
.xq-con-bottom {
  padding: 0.2rem;
  .top {
    margin-bottom: 1rem;
    h5 {
      margin-bottom: 0.1rem;
      font-size: 0.4rem;
      font-family: PingFang SC;
      font-weight: 500;
      color: #07c6b4;
    }
    li {
      margin-left: 0.5rem;
      font-size: 0.35rem;
      font-family: PingFang SC;
      font-weight: 500;
      color: #999999;
      margin-bottom: 0.1rem;
      list-style-type: disc;
    }
  }
}
.btn {
  display: flex;
  justify-content: space-around;
  margin-bottom: 0.1rem;
  div {
    width: 4rem;
    height: 1rem;
    border-radius: 0.2rem;
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 0.4rem;
    text-align: center;
    line-height: 1rem;
  }
  .left {
    background: #ffffff;
    border: 1px solid #07c6b4;
    color: #07c6b4;
  }
  .right {
    background: #07c6b4;
    border: 1px solid #ffffff;
    color: #ffffff;
  }
}
</style>
